<template>
  <div>
     <!-- 默认get请求，数据会在url上，设置post会报错 -->
    <form class="mui-input-group">
      <h3>登录</h3>
      <div class="mui-input-row">
        <label>用户名</label>
        <input
          type="text"
          class="mui-input-clear username"
          placeholder="请输入用户名"
          data-input-clear="5"
          name="username"
          @focus="focus"
        >
        <span class="mui-icon mui-icon-clear mui-hidden"></span>
      </div>
      <p>{{ username_error_msg }}</p>
      <div class="mui-input-row mui-password">
        <label>密码</label>
        <input
          type="password"
          name="password"
          class="mui-input-password"
          placeholder="请输入密码"
          data-input-password="3"
          @focus="focus"
        >
        <span class="mui-icon mui-icon-eye"></span>
      </div>
      <p>{{ pass_error_msg }}</p>
      <div class="mui-button-row">
        <button type="submit" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="return false;" @click="submit">登录</button>&nbsp;&nbsp;
        <button type="reset" class="mui-btn mui-btn-default" onclick="return false;" @click="reset">重置</button>
      </div>
      <div class="mui-button-row register">
        <router-link to="/member/register" tag="a">点击注册</router-link>
        <span>|</span>
        <a href="#">忘记密码</a>
      </div>
    </form>
  </div>
</template>

<script>
import mui from "../../lib/mui/js/mui.min.js";
export default {
  data() {
    return {
      title: "登录",
      error_msg: "",
      username_error_msg: "",
      pass_error_msg: "",
      timerId:""
    };
  },
  created() {
    this.show(this.title);
  },
  mounted() {
    mui(".mui-input-row input").input();
  },
  methods: {
    show(title) {
      this.$emit("getTitle", title);
    },
    focus() {
      this.username_error_msg = "";
      this.pass_error_msg = "";
    },
    submit() {
      clearTimeout(this.timerId)
      if(localStorage.getItem("login")) return mui.alert("您已登录")

      var username = mui(".mui-input-group input")[0].value;
      var password = mui(".mui-input-group input")[1].value;

      // 非空校验
      if (!username || username.trim() == "")
        return (this.username_error_msg = "用户名不能为空");
      if (!password || password.trim() == "")
        return (this.pass_error_msg = "密码不能为空");

      var list = JSON.parse(localStorage.getItem("register")) || [];
      // console.log(list);
      // console.log(username + "===" + password);
      var flag = false;
      list.some(element => {
        if (username == element.name) {
          if (password == element.pass) {
            var o = [
              {
                name: username,
                pass: password
              }
            ];
            localStorage.setItem("login", JSON.stringify(o));
            mui.alert("登录成功");
            // 设置setTimeout后一定要清理定时器
            this.timerId = setTimeout(() => {
                  this.$router.push("/member");
            }, 1500);
          } else {
            this.pass_error_msg = "用户名或密码错误";
          }
          flag = true;
          return true;
        }
      });
      if (!flag) {
        mui.alert("用户名未注册");
      }
    },
    reset() {
      mui(".mui-input-group input").each(function(){
        this.value = "";
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.mui-input-group {
  overflow-y: auto;
  margin: 80px 5px 0;
  padding: 15px 0;
  border-radius: 10px;
  box-shadow: 0 3px 8px #bbb;
  h3 {
    padding: 0 0 15px 15px;
    text-align: center;
  }
  p {
    color: red;
    padding-left: 120px;
    margin-bottom: 0;
  }
  &::after {
    height: 0;
  }
  &::before {
    height: 0;
  }
  .mui-input-row:after {
    height: 0;
  }
  .mui-button-row {
    margin-top: 10px;
    margin-bottom: 20px;
    .mui-btn {
      margin: 0 15px;
    }
  }
  .register {
    span,
    a {
      font-size: 14px;
    }
  }
}
</style>